<template>
  <loading :isSpin="loading">
    <div class="content" v-bind="$attrs">
      <div class="header" ref="headerRef">
        <div class="header-left">
            <!-- 头像 -->
            <a-avatar src="src/assets/icon/topicList/toux.png" shape="square">
              <template #icon><UserOutlined /></template>
            </a-avatar>
            <!-- 用户名    -->
            <span>KyrieHu</span>
        </div>
        <div class="header-right">
          <!--  搜索  -->
          <div class="img-hover">
<!--            <img class="rotate" src="@/assets/icon/topicList/fanhui.png" alt="">-->
            <i class="iconfont icon-yuanzi rotate"></i>
          </div>
          <div class="img-hover">
<!--            <img src="@/assets/icon/topicList/sosuo.png" alt="">-->
            <i class="iconfont icon-sousuo"></i>
          </div>
          <div class="img-hover">
<!--            <img src="@/assets/icon/topicList/type.png" alt="">-->
            <i class="iconfont icon-fenlei"></i>
          </div>
        </div>
      </div>
      <div class="layout">
        <!--  欢迎     -->
        <div class="hello">
          <span>欢迎光临~</span>
          <i class="iconfont icon-tiaozhuan"></i>
        </div>
        <!--   导航栏     -->
        <Navigation @changeLoading="changeLoading" @getClassifyList="getClassifyList"/>
        <!--  主体   -->
        <div class="main">
          <!--   列表    -->
          <div class="list">
            <div class="list-value"  v-for="item in classifyList" :key="item.id" @click="router.push('/scree/' + item.id)">
              <div class="list-img">
                <img src="https://www.notion.so/images/page-cover/nasa_robert_stewart_spacewalk.jpg" alt="">
              </div>
              <div class="title">
                <h1>{{item.name}}</h1>
                <h4>{{item.cascadeDescribe}}</h4>
                <div>xx</div>
              </div>
            </div>
          </div>
          <!--  其他信息   -->
          <div class="other">
            <div class="user">
              <!-- 用户信息-->
              <div class="user-title">
                <span>🎉欢迎KyrieHu回家！🎉</span>
                <a-avatar src="src/assets/icon/topicList/toux.png">
                  <template #icon><UserOutlined /></template>
                </a-avatar>
              </div>
              <!--  个性签名  -->
              <p>KyrieHu</p>
              <p>知不足而奋进,望远山而前行。</p>
              <!-- 外链   -->
              <div class="outside">
                  <div class="outside-img-hover">
                  </div>
              </div>
            </div>
            <!--  天气   -->
            <div class="weather">
                <div class="weather-top">
                  <div class="weather-top-left">
                    <div class="weather-top-left-value">
                      <span>0C&#176</span>
                      <span>晴</span>
                    </div>
                    <div class="region">赣州</div>
                  </div>
                  <div class="weather-top-right">
                    <img src="@/assets/icon/topicList/taiyang.png">
                  </div>
                </div>
              <div class="weather-bottom">
                <div class="weather-bottom-form">
                  <img src="@/assets/icon/topicList/re.png" alt="">
                  <span>12C&#176</span>
                </div>
                <div class="weather-bottom-form">
                  <img src="@/assets/icon/topicList/leng.png" alt="">
                  <span>-6C&#176</span>
                </div>
                <div class="weather-bottom-form">
                  <img src="@/assets/icon/topicList/fengli.png" alt="">
                  <span style="text-align: center">1级</span>
                </div>
              </div>
            </div>
            <!--  lottie   -->
            <div id="lottie_container"></div>
          </div>
        </div>
      </div>
    </div>
    </loading>
</template>

<script setup lang="ts">
import { onMounted, ref} from "vue";
import Navigation from "@/components/navigation.vue";
import lottie from "lottie-web";
import Loading from "@/components/loading.vue";
import {store} from "@/store";
import mitter from "@/mitt";
import router from "@/router";



let headerRef = ref()
let loading = ref<boolean>(false)
let propData = store()
let classifyList = ref<ConurseClassifyType[]>([])

  // 监听滚动条
  onMounted(() => {
    document.addEventListener('scroll', HeaderDisplay, true)
    // 调用函数来加载动画
    lottieAnimation();
    mitter.on('changeTheme', () => {
      HeaderDisplay()
    })
  })

  const changeLoading = (value:boolean) => {
    loading.value = value
  }

  const HeaderDisplay = () => {
  if (propData.currentTheme == 'default') {
    if (document.documentElement.scrollTop ==  0) {
      headerRef.value.style.backgroundColor = 'rgb(241, 245, 253)'
    }
    if (document.documentElement.scrollTop > 0) {
      headerRef.value.style.backgroundColor = "#fff"
    }
  }
    if (propData.currentTheme == 'dark') {
      if (document.documentElement.scrollTop ==  0) {
        headerRef.value.style.backgroundColor = '#18171d'
      }
      if (document.documentElement.scrollTop > 0) {
        headerRef.value.style.backgroundColor = "#18171d"
      }
    }
  }

  const getClassifyList = (value:ConurseClassifyType[]) => {
    classifyList.value = value
}

// 动画
// 假设你的JSON文件名为'animation.json'，并且位于项目的'assets'文件夹下

// 定义一个异步函数，如果animationData是异步加载的
async function lottieAnimation() {
  // 使用ES模块的import来加载JSON数据（如果你的项目支持这种方式）
  const animationData = await import('@/assets/json/lottiefils.json');

  // 现在我们可以安全地加载动画
  const anim = lottie.loadAnimation({
    container: document.getElementById('lottie_container'), // 动画容器的DOM元素
    renderer: 'svg', // 渲染器类型，这里使用SVG
    loop: true, // 是否循环播放
    autoplay: true, // 是否自动播放
    animationData: animationData.default, // 如果使用require，可能需要.default
  });
  // 如果不是异步加载JSON，你可以直接去掉async和await
}

</script>

<style scoped lang="scss">
.content {
  background-color: var(--header-color);;
  padding-bottom: 1.5rem;
}

  .header {
    position: fixed;
    width: 100%;
    min-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-color);
    box-sizing: border-box;
    z-index: 1000;

    .header-left {
      display: flex;
      align-items: center;
      margin-left: 0.4rem;

      span {
        font-weight: bold;
        font-size: 0.32rem;
        opacity: 1;
        margin-left: 0.2rem;
        color: var(--user-name-color);
      }

    }
    .header-right {
      display: flex;
      align-items: center;
      margin-right: 0.4rem;

      .img-hover {
        display: flex;
        height: 0.6rem;
        width: 0.6rem;
        align-items: center;
        justify-content: center;
        margin-left: 0.2rem;
        box-sizing: border-box;
        transition: all .3s;
      }

      .img-hover:hover {
        background-color: var(--header-icon-bk);
        border-radius: 50%;
        cursor: pointer;
      }

      .img-hover:hover .rotate {
        transform: rotate(3000deg);
        transition: all 7s;
      }
    }

    i {
      font-size: 0.3rem;
      color: var(--user-name-color);
    }
  }

  .layout {
    position: relative;
    top: 1rem;
    width: 21.6rem;
    margin: 0 auto;
    // 欢迎
    .hello {
      display: flex;
      height: 0.88rem;
      background-color: var(--hello-bk);
      border: 1px solid var(--hello-border);
      border-radius: 0.18rem;
      padding: 0 0.2rem;
      align-items: center;


      span {
        font-size: 0.28rem;
        font-weight: bold;
        text-align: center;
        flex: 1;
        color: var(--hello-title-color);
      }

      i {
        font-size: .32rem;
        color: var(--user-name-color);
      }
    }
    .hello:hover {
      cursor: pointer;
      color: var(--hello-title-color);
      border-color: var(--hello-border-hover-color);
    }
    .hello:hover span {
      color: var(--hello-title-hover-color);
    }

    // 主体
    .main {
      display: flex;
      .list {
        width: 15.64rem;
        .list-value {
          position: relative;
          width: 15.64rem;
          height: 3.16rem;
          display: flex;
          margin-bottom: .2rem;
          overflow: hidden;


          .list-img {
            height: 100%;
            width: 6.5rem;
            overflow: hidden;
            border-radius: 0.16rem 0 0 0.16rem;
            border-top: 1px solid var(--card-border-color);
            border-left: 1px solid var(--card-border-color);
            border-bottom: 1px solid var(--card-border-color);
          }

          img {
            height: auto;
            width: 100%;
            display: block;
            transition: transform 0.3s ease;

          }

          .title {
            display: flex;
            flex-direction: column;
            flex: 1;
            border-radius: 0 0.16rem 0.16rem 0;
            background-color: var(--hello-bk);
            border-top: 1px solid var(--card-border-color);
            border-right: 1px solid var(--card-border-color);
            border-bottom: 1px solid var(--card-border-color);
            padding: 0.28rem;
            box-sizing: border-box;
            color: var(--user-name-color);

            h1 {
              font-size: 0.44rem;
              font-weight: bold;
            }

            h4 {
              font-size: .22rem;
              color: var(--card-briefing-color);
              flex: 1;
              margin-top: 0.2rem;
            }
          }
        }
        .list-value:hover  .list-img, .list-value:hover .title {
          border-color: var(--card-border-hover-color);
          cursor: pointer;
        }

        .list-value:hover img {
          transform: scale(1.03);
    }
      }

  // 其他信息
  .other {

    .user {
      display: flex;
      flex-direction: column;
      width: 4.76rem;
      height: 4.44rem;
      margin-left: 0.6rem;
      border-radius: 0.2rem;
      background-color: rgb(79 101 240);

      .user-title {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 4.76rem;
        height: 0.56rem;
        margin-top: 0.2rem;

        span {
          font-size: 0.24rem;
          color: white;
          padding: 0.11rem;
          border-radius: 0.24rem;
          background-color: rgb(129 140 248);
        }
        img {
          height: 100%;
          width: 100%;
        }
      }

      p:nth-child(2) {
        color: white;
        font-size: 0.5rem;
        margin-left: 0.4rem;
        margin-top: .2rem;
      }

      p:nth-child(3) {
        color: white;
        font-size: 0.26rem;
        margin-left: 0.4rem;
      }

      .user-title span:hover {
        color: rgb(30 27 75);
        background-color: #f6f6f6;
      }
    }

    .weather {
      display: flex;
      flex-direction: column;
      width: 4.76rem;
      height: 4.6rem;
      margin-left: 0.6rem;
      margin-top: 0.2rem;
      border-radius: 0.2rem;
      background-color: #ffe2c6;

      .weather-top {
        display: flex;
        height: 2.4rem;
        padding: .3rem 0.3rem;

        .weather-top-left {
          width: 50%;

          .weather-top-left-value {
            span:nth-child(1) {
              font-size: 0.76rem;
              color: #4a4a4a;
            }
            span:nth-child(2) {
              font-size: 0.28rem;
              color: #4a4a4a;
            }
          }

          .region {
            font-size: 0.28rem;
            margin-left: 0.07rem;
            color: #6e6e6e;
          }

        }

        .weather-top-right {
          flex: 1;

          img {
            height: 2.4rem;
            width: 2.4rem;
            animation: spin 40s linear infinite;
          }

          @keyframes spin {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }

        }
      }

      .weather-bottom {
        display: flex;
        justify-content: space-between;
        width: 80%;
        height: 1.65rem;
        border-radius: 0.2rem;
        margin: 0.3rem auto 0;
        align-items: center;
        padding: 0 0.3rem;
        background-color: #fafafa;
        box-sizing: border-box;

        .weather-bottom-form {
          display: flex;
          font-size: 0.24rem;
          flex-direction: column;

          img {
            height: 50px;
            width: 50px;
            margin-bottom: .2rem;
          }
        }
      }
    }

    #lottie_container {
      //position: fixed;
      //width: 3.76rem;
      //height: 3.44rem;
      //bottom: 0.3rem;
      //left: 0.1rem;
      width: 2.76rem;
      height: 2.6rem;
      margin-left: 0.6rem;
      margin-top: 0.2rem;
    }
  }
}
}



</style>